<template>
    <div class="box">
        <div class="small_">
            预览
            <img :src="url_" alt="" class="img_">
            <div class="choose">
                <input type="file"  @change="fil_($event)" >
                <button v-show="but_"  @click="submitHead()">保存</button>
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api";
import {baseUrl} from "@/config/api/global";
import axios from "axios";

export default {
    name: "ImageUpload",
    props:['name_'],
    data(){
        return{
            url_:"",
            url_old:"",
            but_:false,
            files_:"",
            _name:"",
        }
    },
    watch:{

    },
    created(){
        setTimeout(()=>{
            this._name = this.name_;
            let data = JSON.parse(window.localStorage.getItem("DataContent"));
            if(data){
                for(let i=0;i<data.length;i++){
                    if(data[i].options == this._name){
                        this.url_ = data[i].content;
                        return
                    }

                }
            }
        },100)
    },
    methods:{
        fil_(event){
            this.url_old = this.url_;
            this.url_ = this.echo(event)
            this.files_ =event.target.files[0];
            this.but_ = true;
        },

        submitHead() {
            // 添加需要上传的文件
            const form = new FormData();
            let _this = this;
            form.append('file', this.files_);
            form.append("logotype",this._name)
            form.append("oldImg",this.url_old)
            api.uploadAdminWebImg(form).then((res)=>{
                if(res.data.code === 200){
                    _this.but_ = false;
                    api.getAdminWeb().then((res)=>{
                        window.localStorage.setItem("DataContent",JSON.stringify(res.data.data));
                    })
                    this.$store.commit("requestInfo", "上传图片成功！");
                }else {
                    this.$store.commit("requestInfo", "上传图片失败！");
                    _this.url_ = _this.url_old
                }
            })
        },
        echo(event){
            //根据这个 <input> 获取文件的 HTML5 js 对象
            let files = event.target.files;
            let file;
            if (files && files.length > 0) {
                file = files[0]; // 获取目前上传的文件
                // 文件大小校验的
                if (file.size > 1024 * 1024 * 5) {
                    this.$store.commit("requestInfo", "图片大小不能超过 5MB!");
                    return "";
                }
                // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL
                // 获取 window 的 URL 工具
                let URL = window.URL || window.webkitURL;
                // 通过 file 生成目标 url
                return  URL.createObjectURL(file);
            }
        },
    }
}
</script>

<style scoped>
input{
    max-width: 250px;
}
.box{
    display: flex;
    justify-content: left;
    padding: 15px 0;
    background: white;
}

.small_{
    width: 300px;
    margin-left: 60px;
}
.choose{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
img{
    margin-bottom: 10px;
}
.img_{
    margin-top: 5px;
    width: 300px;
    aspect-ratio: 16/9;
    vertical-align:top
}
button{
    border: 0;
    background: #3586f1;
    color: white;
    cursor: pointer;
    width: 60px;
    height: 25px;
    border-radius: 2px;
}
button:hover{
    opacity: .9;
}

</style>